<template>
  <div>
    <div class="xiaoqu">
      <el-row>
        <el-col :span="6">
          咨询师名称：<el-input
            style="width: 200px; height: 38px"
            clearable
            v-model="name"
          />
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            style="height: 38px; width: 70px"
            @click="search"
            >搜索</el-button
          >
        </el-col>
      </el-row>
      <el-row class="col" style="margin-top: 20px">
        <el-button type="primary" @click="insert">新增咨询师</el-button>
      </el-row>
      <el-row class="col" style="margin-top: 20px">
        <el-table
          :data="zixunshiList"
          border
          style="width: 100%; text-align: center"
          :header-cell-style="{
            backgroundColor: '#1890ff',
            color: 'white',
            textAlign: 'center',
            height: '50px',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="zixunshiId" label="ID" />
          <el-table-column prop="zixunshiPhoto" label="头像" />
          <el-table-column prop="zixunshiName" label="咨询师名称" />
          <el-table-column prop="zixunshiSex" label="性别" />
          <el-table-column prop="grade_lfy.gradeName" label="等级名" />
          <el-table-column label="所属领域">
            <template #default="scope">
              <span v-if="scope.row.adeptLfyList">
                {{
                  scope.row.adeptLfyList
                    .map((item) => item.adeptName)
                    .join(", ")
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="zixunshiAddress" label="地址" />w
          <el-table-column prop="zixunshiIntroduce" label="简介" />
          <el-table-column label="操作">
            <template #default="scope">
              <!-- <el-button type="text" class="text">查看信息</el-button> -->
              <el-button
                type="text"
                class="text"
                plain
                @click="edite(scope.row)"
                >修改信息</el-button
              >
              <el-button type="text" class="text" plain @click="open(scope.row)"
                >删除咨询师</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>
    <el-dialog v-model="InsertDialog" title="新增咨询师">
      <InsertView @zixunshiData="handleZixunshiData"></InsertView>
      <template #footer>
        <el-button class="text" @click="cancelInsert">取消</el-button>
        <el-button type="primary" @click="InsertZixunshi()">保存</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="UpDateDialog" title="修改信息">
      <UpdateView
        :key="zixunshiAll.zixunshiId"
        @zixunshiData="handle"
        :data="zixunshiAll"
      ></UpdateView>
      <template #footer>
        <el-button class="text" @click="cancelupdate">取消</el-button>
        <el-button type="primary" @click="updateZixunshi()">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

    <script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import qs from "qs";
import { ElMessage, ElMessageBox } from "element-plus";
import InsertView from "./components/InsertView.vue";
import UpdateView from "./components/UpdateView.vue";

const zixunshiList = ref([]);
const id = ref();
const name = ref("");
const InsertDialog = ref(false);
const UpDateDialog = ref(false);
const zixunshi = ref([]);
const zixunshiData = ref([]);
const zixunshiAll = ref([]);
//搜索
const search = async function () {
  await axios
    .post(
      "http://localhost:8080/zixunshi/searchName",
      qs.stringify({ name: name.value })
    )
    .then((response) => {
      zixunshiList.value = response.data.data;
    })
    .catch((error) => {
      console.error("发送数据出错：", error);
    });
};

//新增
const handleZixunshiData = (data) => {
  console.log(data);
  zixunshi.value = data;
};
const insert = () => {
  InsertDialog.value = true;
};
const cancelInsert = () => {
  InsertDialog.value = false;
};

const InsertZixunshi = async () => {
  InsertDialog.value = false;
  console.log(zixunshi.value);
  try {
    await axios.post(
      "http://localhost:8080/zixunshi/insert",
      qs.stringify({
        ...zixunshi.value,
      })
    );
    ElMessage({
      type: "success",
      message: "新增成功",
    });
    //location.reload();
  } catch (error) {
    console.log(error);
  }
};

//修改
const edite = (data) => {
  console.log(data);
  zixunshiAll.value = data;
  UpDateDialog.value = true;
};
const cancelupdate = () => {
  UpDateDialog.value = false;
};
const handle = (data) => {
  console.log(data);
  zixunshiData.value = data;
};
const updateZixunshi = async () => {
  UpDateDialog.value = false;
  console.log(zixunshiData.value);
  try {
    await axios.post(
      "http://localhost:8080/zixunshi/update",
      qs.stringify({
        ...zixunshiData.value,
      })
    );
    ElMessage({
      type: "success",
      message: "修改成功",
    });
    // location.reload();
  } catch (error) {
    console.log(error);
  }
};

//删除咨询师
const open = async (data) => {
  id.value = data.zixunshiId;
  console.log(id.value);
  try {
    const confirmDelete = await ElMessageBox.confirm(
      "确定删除该咨询师吗？",
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );

    if (confirmDelete === "confirm") {
      const response = await axios.post(
        "http://localhost:8080/zixunshi/delete",
        qs.stringify({ id: id.value })
      );
      console.log(response);

      ElMessage({
        type: "success",
        message: "删除成功",
      });

      // 使用setTimeout来异步执行location.reload()，避免一些潜在的冲突
      setTimeout(() => {
        location.reload();
      }, 0);
    } else {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    }
  } catch (error) {
    ElMessage({
      type: "error",
      message: "删除失败",
    });

    // console.error('Error during delete operation:', error);
  }
  // const confirmDelete= await ElMessageBox({
  //   title: '提示',
  //   message: '确定删除该咨询师吗？',
  //   showCancelButton: true,
  //   type: 'warning',

  // });
  // if(confirmDelete==='confirm'){
  //   try{
  //     const response=await axios.post('http://localhost:8080/zixunshi/delete',qs.stringify({id: id.value}));
  //     console.log(response);

  //     ElMessage({
  //       type: 'success',
  //       message: '删除成功'
  //     });
  //     location.reload();
  //   } catch(error){
  //     console.log('发送数据出错：',error);
  //     ElMessage({
  //       type: 'error',
  //       message: '删除失败'
  //     });
  //   }
  // }else{
  //   ElMessage({
  //     type: 'info',
  //     message: '已取消删除'
  //   });
  // }
};

//初次加载数据
onMounted(() => {
  axios
    .get("http://localhost:8080/zixunshi/list")
    .then((response) => {
      zixunshiList.value = response.data.data;
      zixunshiList.value.sort((a, b) => b.zixunshiId - a.zixunshiId);
      // console.log(zixunshiList.value);
    })
    .catch((error) => {
      console.error("获取区域数据时出现错误：", error);
    });
});
</script>
    
    <style lang="less" scoped>
</style>
